<template>
  <div>
    <el-dialog title="打卡记录" :visible.sync="dialogVisible" width="30%" :before-close="closeDialog" class="dialog-wrapper">
      <div class="date-time">
        <span>日期筛选:</span>
        <el-date-picker
          v-model="value"
          clearable
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd"
          @change="handleChange"
        />
      </div>
      <div class="punch-time">
        <el-table :data="list" style="width: 100%">
          <el-table-column prop="created_at" label="打卡时间" />
        </el-table>
      </div>
      <Pagination class="pagination" :total="total" :page-size="pageSize" :cur-page="currentPage" @nextPage="handleNextPage" />
    </el-dialog>
  </div>
</template>
<script>
import Pagination from '@/common/pagination'
import { getpunchRecordList } from '@/api/salesman'
const ERR_OK = 200
export default {
  components: {
    Pagination
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    id: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      value: '',
      list: [],
      currentPage: 1,
      pageSize: 0,
      total: 0,
      start_time: '',
      end_time: ''
    }
  },
  watch: {
    id(newVal) {
      this._getpunchRecordList({ shop_id: this.id, page: this.currentPage })
    }
  },
  methods: {
    closeDialog() {
      this.$emit('closePunchDialog')
    },
    handleChange(value) {
      console.log(value)
      if (value) {
        this.start_time = value[0]
        this.end_time = value[1]
        this.currentPage = 1
        this._getpunchRecordList({ page: this.currentPage, shop_id: this.id, start_time: this.start_time, end_time: this.end_time })
      } else {
        this.start_time = ''
        this.end_time = ''
        this._getpunchRecordList({ page: this.currentPage, shop_id: this.id })
      }
    },
    handleNextPage(page) {
      this.currentPage = page
      this._getpunchRecordList({ page: this.currentPage, shop_id: this.id, start_time: this.start_time, end_time: this.end_time })
    },
    _getpunchRecordList({ shop_id, page, start_time, end_time }) {
      getpunchRecordList({ shop_id, page, start_time, end_time })
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this.list = res.data.data
            this.total = res.data.total
            this.pageSize = parseInt(res.data.per_page)
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/el-table.scss';
.el-table /deep/ .el-table__row td {
  background: #fff;
  border-left: 1px solid rgba(235, 238, 245, 1);
  border-right: 1px solid rgba(235, 238, 245, 1);
}
.el-table /deep/ .has-gutter tr th {
  height: 30px;
  line-height: 30px;
  background-color: rgba(250, 250, 250, 1);
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  font-family: Roboto;
  border-bottom: 1px solid rgba(235, 238, 245, 1);
  border-top: 1px solid rgba(235, 238, 245, 1);
  border-right: 1px solid rgba(235, 238, 245, 1);
  border-left: 1px solid rgba(235, 238, 245, 1);
}
.el-table /deep/ .el-table__row td {
  background: #fff !important;
}
.dialog-wrapper /deep/ .el-dialog{
  min-width: 600px;
}
.pagination{
  margin-top: 85px;
}
.date-time {
  display: flex;
  align-items: center;
  span {
    font-weight: bold;
    margin-right: 10px;
    white-space: nowrap;
    height: 44px;
    line-height: 44px;
    color: rgba(102, 102, 102, 1);
    font-size: 18px;
    font-family: Roboto;
  }
}
.punch-time{
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
}
</style>
